import {
  useSearchParams,
  useLocation,
  useNavigate,
  Link,
} from "react-router-dom";
import { Button } from "antd";
import React from "react"; //当前v5对 react18兼容性更好， 19版本可能出问题 随意vite创建的19版本，最好使降一下版本

const Goods = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const routerLocation = useLocation();
  const routerParams = {};
  for (const [key, value] of searchParams.entries()) {
    routerParams[key] = value;
  }
  console.log(routerParams, "routerParams");
  console.log(routerLocation, "routerLocation");
  const navigate = useNavigate();
  const changeQuery = () => {
    //可以修改query参数
    setSearchParams({
      age: 18,
    });
  };
  return (
    <>
      <div className="menu">
        <Button type={"primary"}>
          <Link to={"/system/person/user"} replace={false}>
            Link路由跳转
          </Link>
        </Button>

        <Button
          onClick={() =>
            navigate("/system/goods?name=John&age=20", {
              replace: false,
              state: {
                hobby: "swing", //加其他参数
              },
            })
          }
        >
          手动点击跳转useNavigate
        </Button>
      </div>
      <div>我是goods页面</div>
      <Button onClick={() => changeQuery()}>修改query参数值</Button>
      <Button onClick={() => navigate(-1)}>返回</Button>
    </>
  );
};
export default Goods;
